<template>
  <div id="ExamAdd">
    <a-form class="ExamForm">
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="6">
          <a-form-item label="患者来源" :hideRequiredMark="false" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-radio-group
              v-decorator="[
                'select',
                {rules: [{ required: true, message: 'Please select your country!' }]}
              ]"
            >
              <a-radio value="a">门诊</a-radio>
              <a-radio value="b">住院</a-radio>
              <a-radio value="c">体检</a-radio>
              <a-radio value="d">借检</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="检查级别" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-radio-group v-decorator="['radio-group']">
              <a-radio value="a">普通</a-radio>
              <a-radio value="b">急诊</a-radio>
              <a-radio value="c">特殊</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="6"></a-col>
        <a-col :span="6"></a-col>
      </a-row>
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="6">
          <a-form-item label="姓名" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                'note',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="病人ID" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                '病人ID',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="地区民族" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :span="12">
                <a-select
                  v-decorator="[
            'gender',
            {rules: [{ required: true, message: 'Please select your gender!' }]}
          ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="12">
                <a-select
                  v-decorator="[
                    'gender',
                    {rules: [{ required: true, message: 'Please select your gender!' }]}
                  ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="出生地" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :span="12">
                <a-select
                  v-decorator="[
            'gender',
            {rules: [{ required: true, message: 'Please select your gender!' }]}
          ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="12">
                <a-select
                  v-decorator="[
                    'gender',
                    {rules: [{ required: true, message: 'Please select your gender!' }]}
                  ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="middle">
        <a-col :span="6">
          <a-form-item label="拼音" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                'note',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="门诊号" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                '病人ID',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="身高体重" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row type="flex" justify="center" align="middle">
              <a-col :span="12">
                <a-row type="flex" justify="center" align="middle">
                  <a-col :span="20">
                    <a-input
                      v-decorator="[
                        {rules: [{ required: true, message: 'Please input your note!' }]}
                      ]"
                      placeholder="请输入"
                    />
                  </a-col>
                  <a-col :span="4">cm</a-col>
                </a-row>
              </a-col>
              <a-col :span="12">
                <a-row type="flex" justify="center" align="middle">
                  <a-col :span="20">
                    <a-input
                      v-decorator="[
                        {rules: [{ required: true, message: 'Please input your note!' }]}
                      ]"
                      placeholder="请输入"
                    />
                  </a-col>
                  <a-col :span="4">kg</a-col>
                </a-row>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="身份职业" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row type="flex" justify="center" align="middle">
              <a-col :span="12">
                <a-select
                  v-decorator="[
            'gender',
            {rules: [{ required: true, message: 'Please select your gender!' }]}
          ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="12">
                <a-select
                  v-decorator="[
                    'gender',
                    {rules: [{ required: true, message: 'Please select your gender!' }]}
                  ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="middle">
        <a-col :span="6">
          <a-form-item label="性别" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-radio-group v-decorator="['radio-group']">
              <a-radio value="a">男</a-radio>
              <a-radio value="b">女</a-radio>
              <a-radio value="c">未知</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="医保卡号" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                '病人ID',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="联系电话" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                '病人ID',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="上传附件" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :span="9">
                <a-button type="primary" size="large">本地上传</a-button>
              </a-col>
              <a-col :span="12">
                <a-button type="primary" size="large">高拍仪上传</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row type="flex" justify="center" align="middle">
        <a-col :span="6">
          <a-form-item label="年龄" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :span="4">
                <a-input
                  v-decorator="[
                      'note',
                      {rules: [{ required: true, message: 'Please input your note!' }]}
                    ]"
                  placeholder="年"
                />
              </a-col>
              <a-col :span="2">年</a-col>
              <a-col :span="4">
                <a-input
                  v-decorator="[
                      'note',
                      {rules: [{ required: true, message: 'Please input your note!' }]}
                    ]"
                  placeholder="月"
                />
              </a-col>
              <a-col :span="2">月</a-col>
              <a-col :span="4">
                <a-input
                  v-decorator="[
                      'note',
                      {rules: [{ required: true, message: 'Please input your note!' }]}
                    ]"
                  placeholder="天"
                />
              </a-col>
              <a-col :span="2">天</a-col>
              <a-col :span="4">
                <a-input
                  v-decorator="[
                      'note',
                      {rules: [{ required: true, message: 'Please input your note!' }]}
                    ]"
                  placeholder="时"
                />
              </a-col>
              <a-col :span="2">时</a-col>
            </a-row>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="证件号码" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                '病人ID',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="联系地址" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-input
              v-decorator="[
                '病人ID',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
              placeholder="请输入"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6"></a-col>
      </a-row>
      <div class="line"></div>
      <a-row>
        <a-col :span="12">
          <a-row>
            <a-col :span="24">
              <a-form-item label="检查目的" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input
                  v-decorator="[
                'note',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="临床症状" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-textarea placeholder="请输入" :rows="4" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-item label="临床诊断" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-textarea placeholder="请输入" :rows="4" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item label="检查备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
                <a-input
                  v-decorator="[
                'note',
                {rules: [{ required: true, message: 'Please input your note!' }]}
              ]"
                  placeholder="请输入"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">


        </a-col>
      </a-row>
      <div class="line"></div>
      <a-row>
        <a-col :span="6">
          <a-form-item label="请求会诊" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">

          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="本地工作室" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :span="18">
                <a-select
                  v-decorator="[
            'gender',
            {rules: [{ required: true, message: 'Please select your gender!' }]}
          ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="发往工作室" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :span="18">
                <a-select
                  v-decorator="[
            'gender',
            {rules: [{ required: true, message: 'Please select your gender!' }]}
          ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="指定医生" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
            <a-row>
              <a-col :span="18">
                <a-select
                  v-decorator="[
            'gender',
            {rules: [{ required: true, message: 'Please select your gender!' }]}
          ]"
                  placeholder
                  @change="handleSelectChange"
                >
                  <a-select-option value="male">male</a-select-option>
                  <a-select-option value="female">female</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-form-item>
        </a-col>
      </a-row>
      <div class="line"></div>

      <a-row>
        <a-col :span="24" style="text-align:center;margin-top:10px;">
            <a-button-group>
              <a-button type="primary" size="large">
                <a-icon type="plus-circle" />
                快速新增
              </a-button>
              <a-button type="primary" size="large">
                <a-icon type="plus-circle" />
                新增
              </a-button>
              <a-button type="primary" size="large" :disabled="changeBtnStatus">
                <a-icon type="edit" />
                修改
              </a-button>
              <a-button type="primary" size="large">
                <a-icon type="hdd" />
                保存
              </a-button>
              <a-button type="primary" size="large">
                <a-icon type="left" />
                返回列表页
              </a-button>
            </a-button-group>
        </a-col>
      </a-row>

    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      changeBtnStatus:true
    };
  }
};
</script>

<style scoped>
#ExamAdd {
  background: #f0f2f5;
  height: calc(100% - 64px);
  overflow: auto;
}
.ExamForm {
  width: 1470px !important;
  margin: 0 auto;
  background: #ffffff;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 20px;
}
.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #e6e6e6;
}
.ant-form-item{
  margin-bottom: 0;
}
</style>
